<template>
  <div class="port-model-test">
    <div class="header">
      <h1>港口模型测试</h1>
      <p>测试港口模型的三维显示功能</p>
    </div>
    
    <div class="model-selector">
      <h3>选择港口模型：</h3>
      <a-select 
        v-model="selectedModelIndex" 
        placeholder="请选择模型"
        style="width: 300px"
        @change="onModelChange"
      >
        <a-option 
          v-for="(model, index) in portModels" 
          :key="index" 
          :value="index"
        >
          {{ model.displayName }}
        </a-option>
      </a-select>
    </div>
    
    <div class="model-viewer-container">
      <ThreeJSView 
        ref="threeViewer"
        :model-path="currentModelPath"
        :key="currentModelPath"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import ThreeJSView from '@/components/ThreeJSView.vue'

// 港口模型数据
const portModels = ref([
  { name: '1.fbx', displayName: '港口起重机1', description: '大型港口集装箱起重机，用于集装箱装卸作业', path: '/港口模型/1.fbx', size: '8.5MB' },
  { name: '2.fbx', displayName: '港口起重机2', description: '中型港口起重机，适用于中型货物装卸', path: '/港口模型/2.fbx', size: '7.2MB' },
  { name: '3.fbx', displayName: '港口起重机3', description: '小型港口起重机，用于精密货物操作', path: '/港口模型/3.fbx', size: '6.8MB' },
  { name: '4.fbx', displayName: '港口起重机4', description: '多功能港口起重机，支持多种货物类型', path: '/港口模型/4.fbx', size: '9.1MB' },
  { name: '5.fbx', displayName: '港口起重机5', description: '自动化港口起重机，配备智能控制系统', path: '/港口模型/5.fbx', size: '8.7MB' },
  { name: '6.fbx', displayName: '港口起重机6', description: '重型港口起重机，用于超大型货物装卸', path: '/港口模型/6.fbx', size: '10.3MB' },
  { name: '7.fbx', displayName: '港口起重机7', description: '环保型港口起重机，采用清洁能源驱动', path: '/港口模型/7.fbx', size: '7.9MB' },
  { name: '8.fbx', displayName: '港口起重机8', description: '智能港口起重机，集成AI识别系统', path: '/港口模型/8.fbx', size: '9.6MB' },
  { name: '9.fbx', displayName: '港口起重机9', description: '模块化港口起重机，可快速组装拆卸', path: '/港口模型/9.fbx', size: '8.2MB' },
  { name: '10.fbx', displayName: '港口起重机10', description: '高效港口起重机，优化装卸效率', path: '/港口模型/10.fbx', size: '7.5MB' },
  { name: '11.fbx', displayName: '港口起重机11', description: '多功能港口起重机，支持多种作业模式', path: '/港口模型/11.fbx', size: '8.9MB' }
])

const selectedModelIndex = ref(0)
const threeViewer = ref(null)

// 计算当前模型路径
const currentModelPath = computed(() => {
  if (selectedModelIndex.value !== null && portModels.value[selectedModelIndex.value]) {
    return portModels.value[selectedModelIndex.value].path
  }
  return null
})

// 模型切换处理
const onModelChange = (index) => {
  console.log('切换到模型:', portModels.value[index].displayName)
}
</script>

<style scoped>
.port-model-test {
  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.header {
  margin-bottom: 20px;
  text-align: center;
}

.header h1 {
  margin: 0 0 8px 0;
  color: #1d2129;
  font-size: 24px;
  font-weight: 600;
}

.header p {
  margin: 0;
  color: #86909c;
  font-size: 14px;
}

.model-selector {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.model-selector h3 {
  margin: 0 0 12px 0;
  color: #1d2129;
  font-size: 16px;
  font-weight: 600;
}

.model-viewer-container {
  flex: 1;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 500px;
}
</style>

